<template>
  <div>
    <!-- 顶栏背景 -->
    <div class="bg-top">
      <img :src="require('../assets/icon/xq_bg.jpg')" alt />
    </div>
    <!-- 顶栏导航 -->
    <div class="nav-top">
      <div class="nav-top-left fl" @click="goback">
        <van-icon name="arrow-left"></van-icon>
      </div>
      <div class="nav-top-right fr">
        <van-icon name="share"></van-icon>
        <van-icon name="star-o"></van-icon>
        <van-icon name="more-o"></van-icon>
      </div>
    </div>
    <!-- 店铺详情 -->
    <div class="content">
      <!-- 店铺名称 -->
      <h2 class="store-title w-center">
        川西坝子
        <van-icon :name="require('../assets/icon/xq_bj-icon.png')" @click="gotoCommentPage"></van-icon>
      </h2>
      <!-- 店铺主要信息 -->
      <div class="flex-row-center flex-jc-start w-center store-mainInfo">
        <van-rate v-model="store.star" readonly allow-half void-icon="star" void-color="#eee" />
        <van-icon name="play"></van-icon>
        <span>{{store.comments}}条</span>
        <span>￥{{store.price}}/人</span>
      </div>
      <!-- 店铺评分分类细则 -->
      <div class="store-evaluation w-center">
        <span>口味:{{store.evaluation.taste}}</span>
        <span>环境:{{store.evaluation.surrounding}}</span>
        <span>服务:{{store.evaluation.service}}</span>
        <span>食材:{{store.evaluation.quality}}</span>
      </div>
      <!-- 图片列表 -->
      <ul class="store-imgList">
        <li>
          <img :src="require('../assets/icon/xq_img.png')" alt />
        </li>
        <li>
          <img :src="require('../assets/icon/xq_img1.png')" alt />
        </li>
      </ul>
      <!-- 营业时间相关 -->
      <div class="store-worktime w-center">
        <van-icon name="shop-o" size="20"></van-icon>
        <div class="store-worktime-info">
          <span style="margin-left: 5px; font-size: 18px;">营业中</span> |
          <span>11:00-23:00</span>
          <div>
            <van-tag plain size="medium">有包厢</van-tag>
            <van-tag plain size="medium">有露台</van-tag>
            <van-tag plain size="medium">有露天位</van-tag>
            <van-tag plain size="medium">开放厨房</van-tag>
          </div>
        </div>
        <van-icon class="arrow-worktime" name="arrow"></van-icon>
      </div>
      <!-- 商家地址 -->
      <div class="store-address w-center">
        <van-icon name="location-o" size="20"></van-icon>
        <div class="store-address-right flex-row-center">
          <div class="store-address-info">
            <span style="margin-left: 5px; font-size: 18px;">{{store.addressName}}</span> |
            <span>11:00-23:00</span>
            <p style="margin: 5px 0; color: #999;">距您步行990m, 需要11分钟</p>
          </div>
          <van-icon name="phone" color="#fec32f" size="40" class="store-address-phone"></van-icon>
        </div>
      </div>
      <!-- 外链 -->
      <div class="store-link w-center flex-row-center">
        <span class="store-link-item flex-row-center">
          <van-icon :name="require('../assets/icon/xq_dz_icon.png')" color="#8bdf91" size="24" />订座
        </span>
        <span class="store-link-item flex-row-center">
          <van-icon :name="require('../assets/icon/xq_wm_icon.png')" color="#fecb2f" size="24" />外卖
        </span>
        <span class="store-link-item flex-row-center">
          <van-icon :name="require('../assets/icon/xq_dc_cion.png')" color="#0b5a99" size="24" />打车
        </span>
      </div>
      <!-- 榜单 -->
      <van-row class="store-range">
        <van-notice-bar color="#333" background="#fff" mode="link" text="羊西线美食热门榜第一名">
          <van-icon
            :name="require('../assets/icon/bangdan_icon.png')"
            color="#fecb2f"
            slot="left-icon"
          />&nbsp;
        </van-notice-bar>
      </van-row>
      <!-- 底部tab栏 -->
      <van-tabs v-model="bottomTabActiveIndex" color="#ffcd00" title-active-color="#ffcd00">
        <van-tab title="优惠信息">优惠信息</van-tab>
        <van-tab title="精选点评">精选点评</van-tab>
        <van-tab title="更多推荐">更多推荐</van-tab>
      </van-tabs>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      store: {
        star: 4.5,
        comments: 999,
        price: 110,
        evaluation: {
          taste: 4.3,
          surrounding: 4.2,
          service: 4.1,
          quality: 4.5
        },
        addressName: "蜀西路46号盛大国际2栋(羊西线三环外侧)"
      },
      bottomTabActiveIndex: 0,
      storeId: 0
    };
  },
  methods: {
    gotoCommentPage() {
      // 判断登录作跳转
      this.$router.push({
        path: "/comments",
        query: {
          storeId: 0
        }
      });
    },
    goback() {
      this.$router.go(-1);
    }
  },
  created() {
    this.storeId = this.$router.history.current.query.storeId;
    console.log(this.storeId);
  }
};
</script>

<style lang="less" scoped>
.bg-top {
  height: 100px;
  background-color: #bb0617;
}

img {
  height: 100%;
}

.w-center {
  margin: 10px 16px 0;
  box-sizing: border-box;
}

.nav-top {
  padding: 0 16px;
  position: fixed;
  top: 27px;
  left: 0;
  height: 20px;
  width: 100%;
  color: #fff;
  box-sizing: border-box;
}

.nav-top .van-icon {
  padding: 5px;
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 50%;
  font-size: 20px;
}

.nav-top-right .van-icon {
  margin-left: 10px;
}

.content {
  overflow: hidden;
}

.store-title {
  position: relative;
}

.store-title .van-icon {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
}

.store-mainInfo span {
  margin-left: 8px;
}

.store-evaluation {
  font-size: 14px;
  color: #666;
}
.store-imgList {
  width: 2000px;
  overflow: hidden;
  li {
    margin: 10px 14px 0 10px;
    float: left;
    width: 200px;
    height: 160px;
    border-radius: 10px;
    background-color: skyblue;
  }
}
.store-address,
.store-worktime {
  padding-bottom: 15px;
  position: relative;
  display: flex;
  justify-content: flex-start;
  border-bottom: 1px solid #ddd;
}

.store-worktime .van-tag {
  margin-right: 8px;
}

.arrow-worktime {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
}

.store-address-info {
  margin-right: 10px;
}

.store-address-phone {
  padding-left: 10px;
  border-left: 1px solid #ccc;
}

.store-link {
  padding: 0 15px;
}

.store-link .van-icon {
  vertical-align: middle;
}

.store-range {
  padding: 10px 0;
  background-color: #eee;
  font-size: 18px;
}

.store-link-item {
  margin-bottom: 10px;
}
</style>
